<!doctype html>
<html>
    <head>
        <script src="/registerSW.js" defer></script>
        <link rel="stylesheet" href="./style.css" />
        <link
            rel="stylesheet"
            href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
        />
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="./vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Password Hashing with Salt</title>
    </head>

    <body>
        <img
            style="opacity: 0.7"
            width="250px"
            height="150px"
            src="./v2-1247d1214f9f61d8cb4ad7ad63bbc3d2_1440w.jpg"
            class="img-fluid"
            alt="哈希算法"
        />

        <div
            style="
                opacity: 0.8;
                margin: 0;
                background-color: white;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: auto;
            "
        >
            <h1 class="mb-3 fw-semibold lh-1">Password Hashing Tool</h1>

            <form
                style="
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                    width: 100%;
                    justify-content: center;
                    align-content: center;
                    align-items: stretch;
                "
            >
                <label>
                    <span style="text-align: center"
                        ><strong>Password:</strong></span
                    >
                    <input
                        type="text"
                        id="password"
                        required
                        class="form-control"
                    />
                </label>
                <button
                    type="button"
                    id="generatepassword"
                    class="btn btn-primary"
                >
                    Generate
                </button>
                <label>
                    <span style="text-align: center"
                        ><strong>Algorithm:</strong></span
                    >
                    <select id="algorithm" class="form-select">
                        <option value="SHA-256">SHA-256</option>
                        <option value="SHA-384">SHA-384</option>
                        <option value="SHA-512" selected>SHA-512</option>
                    </select>
                </label>
                <button type="button" id="button" class="btn btn-primary">
                    Generate
                </button>
            </form>
            <div id="result">
                <table
                    class="table table-bordered border-primary"
                    style="
                        margin: 0 auto;
                        border-collapse: collapse;
                        width: 100%;
                    "
                >
                    <thead>
                        <tr>
                            <th>参数</th>
                            <th>值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Algorithm:</strong></td>
                            <td id="algorithm-table"></td>
                        </tr>
                        <tr>
                            <td><strong>Password:</strong></td>
                            <td id="password-table"></td>
                        </tr>
                        <tr>
                            <td><strong>Salt:</strong></td>
                            <td id="salt-table"></td>
                        </tr>
                        <tr>
                            <td><strong>Hash:</strong></td>
                            <td id="hash-table"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <script type="module" src="./main.ts"></script>
    </body>
</html>
